import React, { useState } from "react";
import { theme, Transfer, Tree } from "antd";
import { useEffect } from "react";
// Customize Table Transfer
const isChecked = (selectedKeys, eventKey) => selectedKeys.includes(eventKey);
const generateTree = (treeNodes = [], checkedKeys = []) =>
  treeNodes.map(({ children, ...props }) => ({
    ...props,
    disabled: checkedKeys.includes(props.key),
    children: generateTree(children, checkedKeys),
    isLeaf: !props?.isPerson,
  }));
export default ({
  value,
  onChange,
  fieldNames = {
    title: "name",
    key: "code",
  },
}) => {
  const [dataSource, setDataSource] = useState(value); //右边的数据
  const [treeData, setTreeData] = useState([]);
  const [targetKeys, setTargetKeys] = useState([]); //选中的key数组
  const { token } = theme.useToken();
  useEffect(() => {
    setTreeData(generateTree(data, targetKeys));
  }, []);
  const handleLoadTree = async (node) => {
    const res = await getTreeData(); //请求接口
    setDataSource([...dataSource, ...res]);
    const posArr = node?.pos?.split("-")?.slice(1);
    const newTree = [...treeData];
    const handle = (pos, data) => {
      const current = data?.[pos?.[0]];
      if (pos?.length > 1) {
        return handle(pos?.slice(1), current?.children);
      }
      current.children = res;
    };
    handle(posArr, treeData);
    setTreeData(newTree);
    // console.log(posArr);
  };
  useEffect(() => {
    value?.length && setTargetKeys(value.map((item) => item.fieldNames["key"])); //取出选择的key数组
  }, [value]);
  return (
    <Transfer
      targetKeys={targetKeys}
      dataSource={data}
      className="tree-transfer"
      render={(item) => item.name}
      rowKey={(item)=>item.code}
      onChange={(keys)=>{setTargetKeys(keys)}}
      showSelectAll={false}
    >
      {({ direction, onItemSelect, selectedKeys }) => {
        debugger
        if (direction === "left") {
          const checkedKeys = [...selectedKeys, ...targetKeys];
          return (
            <div
              style={{
                padding: token.paddingXS,
              }}
            >
              <Tree
                blockNode
                checkable
                checkStrictly
                // defaultExpandAll
                fieldNames={{
                  title: "name",
                  key: "code",
                }}
                loadData={(node) => handleLoadTree(node)}
                treeData={treeData}
                checkedKeys={checkedKeys}
                // treeData={generateTree(dataSource, targetKeys)}
                onCheck={(_, { node: { key } }) => {
                  onItemSelect(key, !isChecked(checkedKeys, key));
                }}
                onSelect={(_, { node: { key } }) => {
                  onItemSelect(key, !isChecked(checkedKeys, key));
                }}
              />
            </div>
          );
        }
      }}
    </Transfer>
  );
};
// const treeData = [
//   {
//     key: '0-0',
//     title: '0-0',
//   },
//   {
//     key: '0-1',
//     title: '0-1',
//     children: [
//       {
//         key: '0-1-0',
//         title: '0-1-0',
//       },
//       {
//         key: '0-1-1',
//         title: '0-1-1',
//       },
//     ],
//   },
//   {
//     key: '0-2',
//     title: '0-2',
//   },
//   {
//     key: '0-3',
//     title: '0-3',
//   },
//   {
//     key: '0-4',
//     title: '0-4',
//   },
// ];
// export default ({ value, onChange,fieldNames }) => {
//   const [targetKeys, setTargetKeys] = useState([]);
// //   const [treeData, setTreeData] = useState([]);
//   const changeData = (keys) => {
//     setTargetKeys(keys);
//   };
// //   useEffect(() => {
// //     setTreeData(getTreeData());
// //   }, [value]);
//   return (
//     <TreeTransfer
//       dataSource={data}
//       targetKeys={targetKeys}
//       onChange={changeData}
//     />
//   );
// };

const data = [
  {
    totol: 1,
    name: "11",
    code: "1",
    isChild: true,
    isPerson: true,
  },
  {
    totol: null,
    name: "111212",
    code: "2",
    isChild: false,
    isPerson: true,
    children: [
      {
        totol: null,
        name: "test",
        code: "99",
        isChild: true,
        isPerson: true,
      },
    ],
  },
  {
    totol: null,
    name: "11ccc",
    code: "3",
    isChild: true,
    isPerson: false,
  },
  {
    totol: null,
    name: "11asa",
    code: "4",
    isChild: true,
    isPerson: false,
  },
  {
    totol: null,
    name: "11hgg",
    code: "5",
    isChild: false,
    isPerson: true,
  },
];
export const getTreeData = (code) => {
  return new Promise((resolve, reject) => {
    // 模拟异步操作
    resolve([
      {
        totol: null,
        name: "11asa",
        code: `38984934222`,
        isChild: true,
        isPerson: false,
      },
    ]);
  });
};
